<template>
    <div class="bigconn" >
        <div class="chat-head" >
              <van-nav-bar
            title="OMINI官方客服"
            left-text=""
            left-arrow
            @click-left="onClickLeft"
          />
          </div>
          <div class="chat-body" >
                <div class="chat-body-date" >
                    {{chatdate}}
                </div>
          <div v-for="(item,index) in ChatRecord " :key="index" >
                <div v-if="item.location==0"  class="chat-body-box" >
                <li class="chat-body-left" >
                    <img class="chat-HeadPortrait" :src='item.HeadPortrait' alt="">
                 <div class="chat-body-left-text" >{{item.content}}</div>
                </li>
                </div>
                <div v-if="item.location==1"   class="chat-body-box" >
                    <li class="chat-body-rigth" >
                     <div class="chat-body-rigth-text" >{{item.content}}</div>
                     <img class="chat-HeadPortrait" :src='item.HeadPortrait' alt="">
                    </li>
                </div>
          </div>
          <div class="chat-bottom" >
            <input type="text" class="chat-bottom-input" v-model="InChat" >
                <button class="chat-bottom-button"  @click="SendAChat" >发送</button>
          </div>
        </div>
    </div>

</template>
<script setup lang="ts" >
// import "amfe-flexible/index.js";

import {onMounted,   onBeforeUnmount, ref} from 'vue'
const onClickLeft = () => history.back();

// //创建websocket服务
// let socket=new WebSocket('   ')
// onMounted(function(){
 
//       //连接服务器成功
// socket.addEventListener('open',function(){
//   console.log('连接服务器');

// })
// })

//       //给服务器发信息
//       socket.addEventListener('close',function(){
//       })
//       socket.addEventListener('error',function(){
//       })
//       //接收服务器聊天
//       socket.addEventListener('message',function(e){
//         console.log(e)
//       })
//聊天界面
        //时间
    let date =new Date
    let chatdate= date.toLocaleString()
    let ChatRecord=ref([])
    //聊天记录
    onMounted(function(){
        if(localStorage.getItem('ChatRecord')){
            ChatRecord.value=JSON.parse(localStorage.getItem('ChatRecord')) 

        }
    })
    //增加聊天
        let InChat=ref('')
       let SendAChat =function(){
       
        if(InChat.value){
            ChatRecord.value.push({
            'HeadPortrait': "https://api.isoyu.com/uploads/ARU/GIF_S/7010.gif",
            'content': InChat.value,
            'location': 1,
        })
        InChat.value=''
        console.log(ChatRecord.value);
        localStorage.setItem('ChatRecord',JSON.stringify(ChatRecord.value))
        }
       
       }
    
     



   
</script>
<style>
*{
    list-style: none;
  }
  .chat-body-box{
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}
  .chat-body-left-text{
    text-align: left;
    padding: 2vw;
    background: #fff;
    margin-left: 2vw;
    box-sizing: border-box;

  }
  .chat-body-rigth-text{
    text-align: right;
    padding: 2vw;
    background: #fff;
    margin-right: 2vw;
    box-sizing: border-box;

  }
  .chat-bottom-input{
    border: 0;
    height: 8vw;
    border-radius:4vw ;
    text-indent: 5vw;
    width: 70%;
  }
  .chat-HeadPortrait{
    width: 10vw;
    height: 10vw;
    border-radius:50% ;
  }
  .chat-body-left{
    display: block;
    margin-left: 5vw;
    margin-top: 2vw;
    float: left;
    display: flex;
    max-width: 60vw;
    word-wrap:break-word;
    word-break:break-all;
    overflow:hidden;
  }
  .chat-body-rigth{
    display: block;
    margin-right: 3vw;
    margin-top: 2vw;
    float: right;
    display: flex;
    max-width: 50vw;
    word-wrap:break-word;
    word-break:break-all;
    overflow:hidden;
  }
.chat-head {
    width: 100%;

    background: #eae9e5;
}
.chat-body{
    width: 100%;
    min-height: 90vh;
    text-align: center;
    margin-top: 6vh;
    margin-bottom: 6vw;
    display: inline-block;
    background: #f2f2f2;
    padding: 2vw;
    box-sizing: border-box;


}
.chat-bottom{
    width: 100vw;
    position: fixed;
    bottom:0vh;
    height: 15vw;
    border-top:1px solid #dedede ;
     background: #f2f2f2;
     box-sizing: border-box;
     padding: 5vw;
     left: 0;
     bottom: 0vw;
}
.chat-bottom-button{
    border: 0;
    background: #c1ab96;
    color: #ddeaf8;
    margin-left: 2vw;
    font-size: 2vw;
    height: 8vw;
    width: 15vw;
    
    border-radius:4vw ;

}
   .bigconn .van-nav-bar__title {
    font-weight: 700 !important;
}

   .bigconn .van-nav-bar__content {
    width: 100vw;
    height: 6vh !important;
    background: #fff !important;
    border: 0 !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 10 !important;
    box-sizing: border-box;

    border-bottom:1px solid #dedede !important;
}

   .bigconn .van-icon {
    color: #c5a28f !important;
}

   .bigconn .van-nav-bar__text {
    color: #c1ab96 !important;
    font-size: 1vw !important;
}
</style>